<script setup lang="ts">
import { h, ref } from 'vue';

import {
  MdiCheck,
  MdiCloseCircleOutline,
  MdiErrorOutline,
  SvgDownloadIcon,
} from '@vben/icons';

import { Button, Modal } from 'ant-design-vue';

const visible = ref<boolean>(false);

function handlePass() {
  visible.value = false;
}

defineExpose({
  open() {
    visible.value = true;
  },
});
</script>

<template>
  <Modal v-model:open="visible" :width="800" title="美妆达人小李 - 质检详情">
    <p class="text-gray-400">
      Brief：春季护肤品推广项目 | 提交时间：2024-03-16 14:30
    </p>

    <section class="space-y-2">
      <label
        class="text-success-600 flex items-center pt-8 text-base font-medium"
      >
        <MdiCheck class="mr-2" />
        通过项
      </label>
      <div v-for="i in 5" :key="i" class="bg-success-100 rounded-lg p-4">
        <h3 class="text-sm font-medium text-neutral-800">包含所有必需关键词</h3>
        <p class="mt-2 text-sm text-neutral-500">
          护肤、保湿、春季等关键词已正确使用
        </p>
      </div>

      <label
        class="text-warning-600 flex items-center pt-4 text-base font-medium"
      >
        <MdiErrorOutline class="mr-2" />
        警告项
      </label>
      <div v-for="i in 5" :key="i" class="bg-warning-100 rounded-lg p-4">
        <h3 class="text-sm font-medium text-neutral-800">包含所有必需关键词</h3>
        <p class="mt-2 text-sm text-neutral-500">
          护肤、保湿、春季等关键词已正确使用
        </p>
      </div>

      <label class="flex items-center pt-4 text-base font-medium text-red-600">
        <MdiCloseCircleOutline class="mr-2" />
        遗漏项
      </label>
      <div v-for="i in 5" :key="i" class="rounded-lg bg-red-100 p-4">
        <h3 class="text-sm font-medium text-neutral-800">包含所有必需关键词</h3>
        <p class="mt-2 text-sm text-neutral-500">
          护肤、保湿、春季等关键词已正确使用
        </p>
      </div>
    </section>

    <template #footer>
      <Button
        :icon="
          h(SvgDownloadIcon, {
            style: { display: 'inline-block', marginRight: '8px' },
          })
        "
        type="dashed"
      >
        下载反馈文件
      </Button>
      <Button> 要求修改 </Button>
      <Button
        :icon="
          h(MdiCheck, {
            style: { display: 'inline-block', marginRight: '8px' },
          })
        "
        type="primary"
        @click="handlePass"
      >
        通过质检
      </Button>
    </template>
  </Modal>
</template>
